<template>
	<view class="content">
		<image class="logo" src="/static/logosanji.png"></image>
		<view class="Grid">
			<view class="Grid-Item" v-for="item in datalist" :key="item.id" @click="goToDetail(item.id)">
					<image class="Image" :src="item.img"></image>
				    <view class="Title">{{ item.title }}</view>					
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				datalist:[
					{id:10,img:'../../static/ic_product.png',title:'公司营运总览'},
					{id:11,img:'../../static/ic_stock.png',title:'销售出库'},
					{id:12,img:'../../static/ic_today_product.png',title:'生产'},
					{id:13,img:'../../static/ic_device.png',title:'在产产品实时信息'},
					{id:14,img:'../../static/ic_hgl.png',title:'质量'},
					{id:15,img:'../../static/ic_energy.png',title:'原辅材料及能源消耗'},
					{id:16,img:'../../static/ic_stock.png',title:'库存'},
					
						{id:1,img:'../../static/ic_product.png',title:'生产总览'},
						{id:2,img:'../../static/ic_stock.png',title:'库存管理'},
						{id:3,img:'../../static/ic_month_product.png',title:'当月生产量'},
						{id:4,img:'../../static/ic_workorder.png',title:'工单进度'},
						{id:5,img:'../../static/ic_today_product.png',title:'当日生产量'},
						{id:6,img:'../../static/ic_energy.png',title:'能源消耗统计'},
						{id:7,img:'../../static/ic_device.png',title:'设备总览'},
						{id:8,img:'../../static/ic_hgl.png',title:'合格率统计'},
						{id:9,img:'../../static/ic_quality.png',title:'质量统计分析'},
				
				]
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: "三基统计"
			})
		},
		methods: {
			goToDetail(id){
				console.log("id="+id);
				if (id == 1){
					uni.navigateTo({
						url: '/pages/product/product-statistics'
					});
					return;
				}
				
				if (id == 2){
					uni.navigateTo({
						url: '/pages/inventory/inventory'
					});
					return;
				}
				
				if (id == 3){
					uni.navigateTo({
						url: '/pages/product/product-index?type=1'
					});
					return;
				}
				
				if (id == 4){
					uni.navigateTo({
						url: '/pages/workorder/schedule-index'
					});
					return;
				}
				
				if (id == 5){
					uni.navigateTo({
						url: '/pages/product/product-index?type=0'
					});
					return;
				}
				
				if (id == 6){
					uni.navigateTo({
						url: '/pages/energy/energy'
					});
					return;
				}
				
				if (id == 7){
					uni.navigateTo({
						url: '/pages/device/device'
					});
					return;
				}
				
				if (id == 8){
					uni.navigateTo({
						url: '/pages/procedure/procedure'
					});
					return;
				}
				
				if (id == 9){
					uni.navigateTo({
						url: '/pages/quality/quality'
					});
					return;
				}
				if (id == 10){
					uni.navigateTo({
						url: '/pages/opsoverview/opsoverview'
					});
					return;
				}
				if (id == 11){
					uni.navigateTo({
						url: '/pages/salesview/salesview'
					});
					return;
				}
				if (id == 12){
					uni.navigateTo({
						url: '/pages/prodstats/prodstats'
					});
					return;
				}
				if (id == 13){
					uni.navigateTo({
						url: '/pages/inprodrealtimedata/inprodrealtimedata'
					});
					return;
				}
				if (id == 14){
					uni.navigateTo({
						url: '/pages/qualityreport/qualityreport'
					});
					return;
				}
				if (id == 15){
					uni.navigateTo({
						url: '/pages/aluminumtotal/aluminumtotal'
					});
					return;
				}
				if (id == 16){
					uni.navigateTo({
						url: '/pages/inventorydetail/inventorydetail'
					});
					return;
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 71rpx;
		width: 280rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: 60rpx;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	 .Grid {
	      display: flex;
	      flex-wrap: wrap;
	      justify-content: space-around;
	  }
	
	  .Grid-Item {
	      width: 25%;
	      text-align: center;
	      padding: 10rpx;
	  }
	
	  .Image {
	      width: 150rpx;
	      height: 150rpx;
	      margin: 0 auto;
	  }
	
	  .Title {
	      margin-top: 15rpx;
		  margin-bottom: 44rpx;
	  }
	


</style>
